import React,{Component} from "react";

class DemoFormInput extends Component {
  constructor() {
    super();
    this.state = {
      title:'受控组件',
      title1:'非受控组件标题'
    }
  }
  //创建ref对象
  titleRef = React.createRef()
  
  updateTitle = (e) =>{
    console.log('e',e);
    this.setState({
      title: e.target.value
    })
  }

  getTitle=(e)=>{
     //阻止浏览器默认行为
     e.preventDefault()
     console.log('ref-val', e, this.titleRef.current.value);
  }

  render() { 
    console.log('ref',this.getTitle);
    return (
    <>
     <form onSubmit={this.getTitle}>
      <h2>03.受控与非受控组件</h2>
      <div>
        <input type="text" value={this.state.title} readOnly/>
      </div>
      <h2>04.非受控组件</h2>
      <div>
        <input type="text" ref={this.titleRef}/>
        <button>获取input的内容</button>
      </div>
     </form>
    </>);
  }
}
 
export default DemoFormInput;